Vue.component('Cart', {
  props: ['cartItems'],
  template: `
    <div>
      <div v-if="cartItems.length === 0">
        购物车暂无商品。
      </div>
      <ul v-else>
        <li v-for="cartItem in cartItems">
          {{cartItem.title}}: ￥{{cartItem.title}} x {{cartItem.quantity}} = ￥{{cartItem.price * cartItem.quantity}}
        </li>
      </ul>
      <div style="text-align:right">
        总价：￥{{totalPrice}}
      </div>
    </div>
  `,
  computed: {
    totalPrice() {
      return this.cartItems.reduce((sum,item) => sum += item.price * item.quantity, 0)
    }
  }
})